<template>
	<view class="container">
		<view class="flex justify-between align-center text-sm text-666 c-nav bg-white">
			<view @click="checkType(0)" :class="{ on: status == 0 }"
				class="padding-top-sm padding-bottom-sm margin-left margin-right">
				领券中心
			</view>
			<view class="padding" :class="{ on: status == 1 }" @click="checkType(1)">
				已领取
			</view>
			<view class="padding" :class="{ on: status == 2 }" @click="checkType(2)">
				已使用
			</view>
			<view class="padding" :class="{ on: status == 3 }" @click="checkType(3)">
				已过期
			</view>
		</view>
		<block v-if="status == 0">
			<view class="margin-sm padding bg-white flex justify-between align-center radius10"
				v-for="(item, index) in list" :key="index">
				<view class="color">
					<view class="">
						<block v-if='item.type!=1'>
							<text class="text-15">¥</text>
							<text class="text-30 text-bold">{{ parseFloat(item.amount/ 100).toFixed(2)}}</text>
						</block>

						<text class="text-30 text-bold" v-else>{{item.amount/10 +'折'}}</text>
					</view>
					<view class="text-sm">
						<block v-if="item.type == 1">折扣券</block>
						<block v-if="item.type == 2">消费券</block>
						<block v-if="item.type == 3">发单券</block>
						<block v-if="item.type == 4">满减券</block>
					</view>
				</view>
				<view class="margin-left margin-right" style="width: 320rpx">
					<view class="text-sm text-bold text-181818 text-cut">
						<text v-if="item.couponScopeName">【{{ item.couponScopeName }}】</text>
						{{ item.name }}
					</view>
					<view class="text-13 text-666 text-bold margin-top-xs text-cut">
						截止领券 {{ item.endTime }}
					</view>
				</view>
				<button class="text-sm text-white round btn bg-linear-FF416C" @click="submit(item)"
					v-if="item.receiveStatus == 0">
					领取
				</button>
				<button class="text-sm text-white round btn bg-CACACA" v-else>
					已领
				</button>
			</view>
		</block>

		<block v-else>
			<view :class="status==1?'justify-between':''" class="margin-sm padding bg-white flex align-center radius10"
				v-for="(item, index) in list" :key="index">
				<view class="color">
					<view class="">
						<text class="text-15">¥</text>
						<text class="text-30 text-bold"> {{ parseFloat(item.couponAmount/ 100)}}</text>
					</view>
					<view class="text-sm">
						<block v-if="item.couponType == 1">折扣券</block>
						<block v-if="item.couponType == 2">消费券</block>
						<block v-if="item.couponType== 3">发单券</block>
						<block v-if="item.couponType== 4">满减券</block>
					</view>
				</view>
				<view class="margin-left margin-right" style="width: 320rpx">
					<view class="text-sm text-bold text-181818 text-cut" v-if="item.scopeType == 1">
						【全品类】 {{ item.couponName }}
					</view>
					<view class="text-sm text-bold text-181818 text-cut" v-if="item.scopeType == 2">
						【指定类目】{{item.couponScopeName}} {{ item.couponName }}
					</view>
					<view class="text-sm text-bold text-181818 text-cut" v-if="item.scopeType == 3">
						【指定商品】{{ item.couponName }}
					</view>
					<view class="text-13 text-666 text-bold margin-top-xs text-cut">
						截止领券 {{item.couponExpireTime }}
					</view>
				</view>
				<button class="text-sm text-white round btn bg-linear-FF416C" @click="toPage('/pages/mall/mall')"
					v-if="item.status==1">
					去使用
				</button>
			</view>
		</block>

		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from "@/common/util/BetterPull";
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = "loading";
					let api = "";
					const obj = {
						pageNum: page,
						pageSize: 10,
						userId: uni.getStorageSync("userId"),
					};
					if (this.status == 0) {
						api = "centerList";
					} else {
						obj["status"] = this.status;
						api = "comReceivelist";
					}

					const [err, res] = await this.$get(this.$api[api], obj);
					if (res) {
						var data = res.data.list;
						done(data);
						if (data.length < 10) {
							this.loading = "noMore";
						} else {
							this.loading = "more";
						}
					}
					if (err) {
						done([]);
						this.loading = "noMore";
					}
				},
			}),
		],
		data() {
			return {
				loading: "more",
				status: 0,
			};
		},
		methods: {
			async submit(item) {
				const data = {
					couponId: item.id,
					type: 1,
					userId: uni.getStorageSync("userId"),
				};
				const [err, rs] = await this.$get(this.$api.userGetCoupon, data);
				if (rs) {
					console.log(rs);
					this.$util.msg(rs.message);
					this.Refresh();
				}
			},
			checkType(index) {
				this.status = index;
				this.list = [];
				this.Refresh();
			},
			toPage(url) {
				uni.switchTab({
					url,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.c-nav {
		view {
			border-bottom: 6rpx solid #fff;
		}

		.on {
			color: #221815;
			font-weight: bold;
			border-bottom: 6rpx solid #ed7200;
		}
	}

	.btn {
		min-width: 130rpx;
		width: 130rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		// background: linear-gradient(to right,#FF416C,#FF4B2B);
	}

	.item {
		width: 346rpx;
		max-width: 346rpx;
	}
</style>
